<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
	<meta charset="utf-8">
	<title>树图</title>
	<script src="../static/js/echarts.js"></script>
	<!-- <script src="../static/js/echarts.min.js"></script> -->
	
	<script src="../../element/static/js/jquery-3.5.1.js"></script>
</head>
<body style="height: 100%; margin: 0">
	<div id="main" style="height: 100%"></div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var dom = document.getElementById('main');
var myChart = echarts.init(dom, null, {
	renderer: 'canvas',
	useDirtyRect: false
});

var data = {
	"name":"中国",
	"value":1,
	"children":[
		{
			"name": "湖北",
			"value": 11,
			"children":[
				{
					"name": "武汉", 
					"value": 111,
					"children":[
						{"name": "江汉区", "value": 1111},
						{"name": "武昌区", "value": 1112}
					]
				},
				{"name": "宜昌", "value": 112}
			]
		},
		{
			"name": "河南", 
			"value": 12,
			"children":[
				{"name": "郑州", "value": 121},
				{"name": "信阳", "value": 122}
			]
		}
	]
};

var option = {
	tooltip: {
		trigger: 'item',
		triggerOn: 'mousemove'
	},
	series: [
		{
			type: 'tree',
			data: [data],
			top: '1%',
			left: '7%',
			bottom: '1%',
			right: '20%',
			symbolSize: 8,
			roam: true,		//是否开启鼠标缩放和平移漫游
			label: {
				position: 'left',
				verticalAlign: 'middle',
				align: 'right',
				fontSize: 12
			},
			leaves: {
				label: {
					position: 'right',
					verticalAlign: 'middle',
					align: 'left'
				}
			},
			emphasis: {
				focus: 'descendant'
			},
			expandAndCollapse: true,
			animationDuration: 550,
			animationDurationUpdate: 750
		}
	]
}
myChart.setOption(option);

window.addEventListener('resize', myChart.resize);
myChart.on('click', function (params) {
	// console.log(params);
	console.log(params.data);
});
</script>
</html>
